<template>
	<div>
		<div class="container">
			<!-- 表格 -->
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="fee_record_id" label="订单ID" width="150" align="center"></el-table-column>
				<el-table-column prop="vehicle_num" label="车牌"></el-table-column>
				<el-table-column prop="parking_record_id" label="停车记录ID" width="200" align="center"></el-table-column>
				<!-- <el-table-column prop="fee_record_money" label="费用"></el-table-column> -->
				<el-table-column label="费用">
					<template #default="scope"> ￥{{ scope.row.fee_record_money}}</template>
				</el-table-column>

				<el-table-column prop="parking_record_enter_time" label="入场时间"></el-table-column>
				<el-table-column prop="parking_record_leave_time" label="离场时间"></el-table-column>
				<el-table-column label="支付状态">
					<template #default="scope">{{ scope.row.fee_record_status ?"已支付":"未支付"}}</template>
				</el-table-column>
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<div style="display: flex;">
							<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index)"
								v-permiss="12">
								删除
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页处理 -->
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>

		</div>

		

	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete } from '@element-plus/icons-vue';
import { feeRecordRemoveFn, feeRecordListFn } from '../api/index';

// 定义对象的结构
interface FeeRecordItem {
	fee_record_id: string;
	parking_record_id: string;
	fee_record_money: string;
	parking_record_enter_time: string;
	parking_record_leave_time: string;
	fee_record_status: string | number;
	vehicle_num: string;

}

// 记录表单信息
const query = reactive({
	keyword: '',
	pageIndex: 1,
	pageSize: 5
});

const tableData = ref<FeeRecordItem[]>([]);
const pageTotal = ref(0);

// 获取表格数据
const getData = (page: number, pageSize: number) => {
	let token = localStorage.getItem('auto_token')
	feeRecordListFn({ page, pageSize, token }).then(res => {
		// console.log('1.0', res)
		let { code, result } = res;
		if (code == 200) {
			tableData.value = result;
			pageTotal.value = res.data[0].total;
		}
	});
};
getData(query.pageIndex, query.pageSize);


// 分页导航
const handlePageChange = (val: number) => {
	query.pageIndex = val;
	getData(query.pageIndex, query.pageSize);
};

// 删除操作
const handleDelete = (index: number) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除该订单记录吗？', '提示', {
		type: 'warning'
	})
		.then(() => {
			let parking_record_id = tableData.value[index].parking_record_id;
			let token = localStorage.getItem('auto_token');
			feeRecordRemoveFn({ token, parking_record_id }).then(
				content => {
					console.log(content);
					let { code, msg } = content;
					if (code == 200) {
						tableData.value.splice(index, 1);
						ElMessage.success(msg);
					}
					else {
						ElMessage.error(msg);
					}
				}
			)

		})
		.catch(() => { });
};

</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}

.table {
	width: 100%;
	font-size: 14px;
}

.red {
	color: #F56C6C;
}

.mr10 {
	margin-right: 10px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
